<template>
  <div>
    <a-table
      rowKey="menuItemGroupItemId"
      :columns="columns"
      :data-source="tabledata"
      :scroll="{ y: 560 }"
    >
      <template #icon="{ text }">
        <a-tooltip placement="top">
          <template #title>
            <span>{{ text }}</span>
          </template>
          <iconpark-icon :name="text"></iconpark-icon>
        </a-tooltip>
      </template>
      <template #action="{ record }">
        <a-popconfirm title="是否删除?" @confirm="onDelete(record.menuItemGroupItemId)">
          <a-button type="default" shape="circle">
            <template #icon><iconpark-icon name="delete"></iconpark-icon></template>
          </a-button>
        </a-popconfirm>
        <a-button type="default" shape="circle" class="ml-1" @click="onupdate(record)">
          <template #icon><iconpark-icon name="update"></iconpark-icon></template>
        </a-button>
      </template>
    </a-table>

    <div class="float-r" @click="add">
      <iconpark-icon name="add"></iconpark-icon>
    </div>

    <a-modal
      v-model:visible="modelVisible"
      title="修改内容"
      ok-text="确认"
      cancel-text="取消"
      @ok="modelConfirm"
    >
      <a-input
        placeholder="菜单组子菜单标题"
        v-model:value="updateData.menuItemGroupItemTitle"
      >
        <template #prefix>
          <iconpark-icon name="title"></iconpark-icon>
        </template>
        <template #suffix>
          <a-tooltip title="菜单组子菜单标题">
            <iconpark-icon name="sigh"></iconpark-icon>
          </a-tooltip>
        </template>
      </a-input>
      <a-input
        placeholder="图标名称"
        v-model:value="updateData.menuItemGroupItemIcon"
        class="mt-1"
      >
        <template #prefix>
          <iconpark-icon name="icon"></iconpark-icon>
        </template>
        <template #suffix>
          <a-tooltip title="图标名称">
            <iconpark-icon name="sigh"></iconpark-icon>
          </a-tooltip>
        </template>
      </a-input>
      <a-select
        style="width: 100%"
        class="mt-1"
        v-model:value="updateData.menuItemGroupTitle"
      >
        <a-select-option
          v-for="(i, index) in menuGroupData"
          :key="index"
          :value="i.menuitem"
          @click="selectChange(i.menuitem, i.menuTitle)"
        >
          {{ i.menuTitle }}
        </a-select-option>
        <template #suffixIcon>
          <iconpark-icon name="sigh" title="对应menuGroupId"></iconpark-icon
        ></template>
      </a-select>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, ref } from "vue";
import { message } from "ant-design-vue";
const columns = [
  {
    title: "菜单组子菜单标题",
    align: "center",
    width: 250,
    dataIndex: "menuItemGroupItemTitle",
  },
  {
    title: "图标",
    align: "center",
    dataIndex: "menuItemGroupItemIcon",
    slots: { customRender: "icon" },
  },
  { title: "对应menuGroup标题", align: "center", dataIndex: "menuItemGroupTitle" },
  {
    title: "Action",
    fixed: "right",
    width: 110,
    slots: { customRender: "action" },
  },
];

export default defineComponent({
  props: { tabledata: Array },
  setup(props) {
    const { proxy } = getCurrentInstance();
    const modelVisible = ref(false);
    const updateData = ref({
      menuItemGroupItemTitle: "",
      menuItemGroupItemIcon: "",
      menuItemGroupId: "",
      menuItemGroupTitle: "",
    });
    const menuGroupData = ref([]);
    const isAdd = ref(false);

    onMounted(() => {
      proxy.$api.get("menuitemGroup/i-t").then((res) => {
        console.log(res);
        if (res.error === 0) {
          menuGroupData.value = res.message;
        } else message.error(res.message);
      });
    });

    function onDelete(id) {
      console.log(id);
      proxy.$api.get("menuitemGroupItem/delete?id=" + id).then((res) => {
        console.log(res);
        if (res.error === 0) {
          modelVisible.value = false;
          message.success(res.message);
          setTimeout(() => {
            location.reload();
          }, 1000);
        } else message.error(res.message);
      });
    }
    function onupdate(object) {
      updateData.value = object;
      modelVisible.value = true;
      isAdd.value = false;
    }
    const modelConfirm = () => {
      if (isAdd.value) {
        proxy.$api.post("menuitemGroupItem/add", updateData.value).then((res) => {
          if (res.error === 0) {
            modelVisible.value = false;
            message.success(res.message);
            setTimeout(() => {
              location.reload();
            }, 1000);
          } else message.error(res.message);
        });
      } else {
        proxy.$api.post("menuitemGroupItem/update", updateData.value).then((res) => {
          if (res.error === 0) {
            modelVisible.value = false;
            message.success(res.message);
            setTimeout(() => {
              location.reload();
            }, 1000);
          } else message.error(res.message);
        });
      }
    };

    function selectChange(groupId, groupTitle) {
      updateData.value.menuItemGroupId = groupId;
      updateData.value.menuItemGroupTitle = groupTitle;
    }
    const add = () => {
      modelVisible.value = true;
      isAdd.value = true;
      updateData.value = {
        menuItemGroupItemTitle: "",
        menuItemGroupItemIcon: "",
        menuItemGroupId: "",
      };
    };
    return {
      columns,
      modelVisible,
      updateData,
      menuGroupData,
      onDelete,
      onupdate,
      modelConfirm,
      selectChange,
      add,
    };
  },
});
</script>

<style scoped></style>
